function extractSkeleton() {

  document.addEventListener("focus", (e) => {
    // extractSkeleton();
    // 阻止默认行为，避免页面跳转
    e.preventDefault();
    e.cancelable = true;
    e.stopPropagation();
    return false;
  }, { capture: true });

  document.addEventListener("click", (e) => {
    console.log(e.target, 'e.target');

    if (Array.prototype.includes.call(e.target.classList, 'skeleton')) {
      e.target.classList.remove('skeleton');

    } else {
      e.target.classList.add('skeleton');

    }

    e.preventDefault();
    e.cancelable = true;
    e.stopPropagation();
    return false;
  }, { capture: true });


  const style = document.createElement("style");
  style.innerHTML = `
.skeleton {
  box-shadow: 0px 0px 0px 2px red !important;
}
`
  document.body.appendChild(style);
 
}

function replaceElements(root) {
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
  console.log(walker.nextNode(), 'walker');
  const processedParents = new Set();

  while (walker.nextNode()) {
    const textNode = walker.currentNode;
    const parentEl = textNode.parentElement;

    if (parentEl && !processedParents.has(parentEl)) {
      processedParents.add(parentEl);
      // 保留原有布局样式并添加骨架样式
      parentEl.style.cssText = `
        background: #f0f0f0;
        color: transparent;
        height: ${parentEl.offsetHeight}px;
        width: ${parentEl.offsetWidth}px;
      `;
      parentEl.textContent = '';
    }
  }
}

function downloadHtml() {
  const htmlContent = Array.from(document.querySelectorAll(".skeleton")).map(el => {
    const rect = el.getBoundingClientRect(); 
    const clientWidth = document.documentElement.clientWidth || document.body ;
    const clientHeight = document.documentElement.clientHeight || document.body ;

    return `<div class="skeleton" style="background: #f0f0f0; height: ${rect.height/clientHeight*100}%; width: ${rect.width/clientWidth*100}%; position: fixed; top: ${rect.top/clientHeight*100}%; left: ${rect.left/clientWidth*100}%;"></div>`;
  }).join('');

  const blob = new Blob([`<html><body>${htmlContent}</body></html>`], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'skeleton.html';
  a.click();
  URL.revokeObjectURL(url);
  return;
}

// 页面内容加载完成后执行提取逻辑
// extractSkeleton();